<template>
  <div style="display: flex">
    <Card style="width: 250px" dis-hover title="场景分类" icon="md-document">
      <Row type="flex" justify="space-between" v-show="showCategory">
        <Button type="primary" v-if="showChild" @click="clickChildCategory"
          >添加子分类</Button
        >
        <Button type="primary" v-else disabled @click="clickChildCategory"
          >添加子分类</Button
        >
        <Button type="primary" @click="clickRootCategory">添加根分类</Button>
      </Row>
      <Row style="margin-top: 20px">
        <Tree :data="rootDate" @on-select-change="treeSelectChange" />
      </Row>
    </Card>
    <Card
      title="填写场景分类明细"
      dis-hover
      icon="md-document"
      v-show="showRight"
      style="flex: 1"
    >
      <Form
        ref="addfrom"
        :model="FormData"
        :rules="FormRules"
        :label-width="140"
      >
        <Row>
          <Col span="18" offset="3">
            <FormItem label="场景分类名称：" prop="categoryName">
              <Input
                v-model="FormData.categoryName"
                maxlength="20"
                show-word-limit
                placeholder="请输入分类名称"
              ></Input>
            </FormItem>
          </Col>
          <!-- <Col span="18" offset="3">
					<FormItem label="分类编码：" prop="categoryNo">
						<Input v-model="FormData.categoryNo" maxlength="20" placeholder="分类编码"></Input>
					</FormItem>
					</Col> -->
          <Col span="18" offset="3">
            <FormItem label="位置：" prop="position">
              <InputNumber
                type="number"
                v-model="FormData.position"
                :precision="0"
                placeholder="位置"
                :max="999"
                :min="0"
              />
            </FormItem>
          </Col>
          <Col span="18" offset="3">
            <FormItem label="是否启用：">
              <RadioGroup v-model="FormData.categoryState">
                <Radio label="1">启用</Radio>
                <Radio label="2">禁用</Radio>
              </RadioGroup>
            </FormItem>
          </Col>
          <Col span="18" offset="3">
            <FormItem label="备注：">
              <Input
                type="textarea"
                v-model="FormData.categoryDesc"
                :autosize="{ minRows: 2, maxRows: 5 }"
                maxlength="100"
                show-word-limit
                placeholder="请输入描述"
              ></Input>
            </FormItem>
          </Col>
          <Col span="18" offset="3">
            <FormItem>
              <Button type="primary" @click="handleSubmit('FormData')"
                >提交</Button
              >
              <Button @click="handleReset('FormData')" class="ivu-ml-8"
                >取消</Button
              >
            </FormItem>
          </Col>
        </Row>
      </Form>
    </Card>
  </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
import util from '@/libs/util';
import { ApiRequest } from '@api/basePage';
import { myTreeDataUtils } from '@/assets/js/commonUtils';

export default {
  components: {},
  data () {
    return {
      isRootCategory: false,
      showRight: false,
      showCategory: true,
      showChild: false,
      HCSList: ['一级', '二级', '三级'],
      util: util,
      dynamicData: {},
      pagePath: '', // 当前路由
      FormRules: {
        categoryName: [
          { required: true, message: '请填写分类名称', trigger: 'blur' },
          {
            type: 'string',
            min: 1,
            message: '分类名称不得少于一个字符',
            trigger: 'blur'
          }
        ],
        position: [{ required: true, message: '请填写位置' }],
        categoryDesc: [
          { required: true, message: '请填写描述', trigger: 'blur' },
          {
            type: 'string',
            min: 1,
            message: '描述不得少于一个字符',
            trigger: 'blur'
          }
        ]
      },
      FormData: {
        parentUuid: 'systemUuid',
        categoryName: '',
        categoryDesc: '',
        levelNum: '',
        position: 0,
        categoryState: '1',
        uuid: ''
      },
      rootDate: []
    };
  },
  watch: {
    $route: function () {
      this.$nextTick(() => {
        this.$router.go(0);
      });
    }
  },
  created () {
    this.getConfigData();
    this.initData();
  },
  mounted () {},
  methods: {
    // 获取初始配置信息
    getConfigData () {
      this.pagePath = this.$route.path;
      let dynamicData = require('./configjs/sceneModelManageAdd').default;
      this.requestApi = dynamicData.requestApi; // 页面所需接口集合
      this.$set(this.$data, 'dynamicData', dynamicData);
    },
    // 初始化数的数据
    initData (formData) {
      let data = {
        parentUuid: 'systemUuid'
      };
      // 创建分类
      ApiRequest(
        this.requestApi.getAllSceneCategory.url,
        this.requestApi.getAllSceneCategory.type,
        data,
        true
      ).then(res => {
        if (res.retStatus === '1') {
          let myNewData = [];
          this.rootDate = myTreeDataUtils(res.retData);
        }
      });
    },
    // 获取表格数据
    getData (formData) {
      this.$refs.table.getData(formData);
    },
    // 点击 关联子分类
    clickChildCategory () {
      this.isRootCategory = false;
      this.showRight = true;
    },
    // 点击添加根分类
    clickRootCategory () {
      this.isRootCategory = true;
      this.showRight = true;
    },
    // 选择关联
    handleLink (e) {
      let link = e;
      if (link == 'template') {
        this.$refs.linkattribute.showmodel();
      } else if (link == 'brand') {
        this.$refs.linkbrand.showmodel();
      } else if (link == 'gather') {
        this.$refs.linkgather.showmodel();
      } else if (link == 'category') {
        this.$refs.linkcategory.showmodel();
      } else if (link == 'scene') {
        this.$refs.linkscene.showmodel();
      }
    },
    handleSubmit (FormData) {
      if (
        this.FormData.position === '' ||
        this.FormData.position === null ||
        this.FormData.position === undefined
      ) {
        this.$Message.error('位置不能为空!');
        return;
      }
      if (this.FormData.categoryName === '') {
        this.$Message.error('请填写分类名称');
        return;
      }
      if (this.FormData.categoryState === '') {
        this.$Message.error('请选择是否启用');
        return;
      }
      if (this.isRootCategory) {
        // 根分类
        let data = {
          parentUuid: 'systemUuid',
          levelNum: 1,
          categoryName: this.FormData.categoryName,
          categoryNo: this.FormData.categoryNo,
          categoryDesc: this.FormData.categoryDesc,
          position: this.FormData.position,
          categoryState: this.FormData.categoryState
        };
        // 创建分类
        ApiRequest(
          this.requestApi.createPlatCategory.url,
          this.requestApi.createPlatCategory.type,
          data,
          false
        ).then(res => {
          if (res.retStatus === '1') {
            this.$Message.success('添加成功');
            this.$router.go(-1);
          }
        });
      } else {
        if (this.FormData.uuid === '') {
          this.$Message.error('请选择要添加子分类的父类');
          return;
        }
        let data = {
          parentUuid: this.FormData.uuid,
          categoryName: this.FormData.categoryName,
          categoryNo: this.FormData.categoryNo,
          categoryDesc: this.FormData.categoryDesc,
          position: this.FormData.position,
          categoryState: this.FormData.categoryState,
          levelNum: 2
        };
        // 创建分类
        ApiRequest(
          this.requestApi.createPlatCategory.url,
          this.requestApi.createPlatCategory.type,
          data,
          false
        ).then(res => {
          if (res.retStatus === '1') {
            // this.clearData();
            // this.initData();
            this.$Message.success('添加成功');
            this.$router.go(-1);
          }
        });
      }
    },
    clearData () {
      this.FormData.uuid = '';
      this.FormData.categoryName = '';
      this.FormData.categoryDesc = '';
      this.FormData.categoryNo = '';
      this.FormData.position = '';
    },
    handleReset () {
      this.$router.go(-1);
    },
    treeSelectChange (arr, item) {
      this.FormData.uuid = item.uuid;
      if (item.levelNum === '3') {
        this.showRight = true;
        this.showCategory = true;
      } else if (item.levelNum === '2') {
        this.showChild = false;
        this.showRight = false;
      } else if (item.levelNum === '1') {
        this.showChild = true;
        this.showRight = true;
      } else {
        this.showRight = true;
        this.showCategory = true;
      }
    },
    // 懒加载数据
    loadData (item, callback) {
      let data = {
        parentUuid: item.uuid
      };
      // 创建分类
      ApiRequest(
        this.requestApi.getAllSceneCategory.url,
        this.requestApi.getAllSceneCategory.type,
        data,
        true
      ).then(res => {
        if (res.retStatus === '1') {
          let myNewData = [];
          if (res.retData !== null) {
            res.retData.forEach(item => {
              myNewData.push({
                title: item.categoryName,
                uuid: item.uuid,
                levelNum: item.levelNum,
                loading: false,
                expand: true,
                children: []
              });
            });
            callback(myNewData);
          } else {
            callback(myNewData);
          }
        }
      });
    }
  }
};
</script>
